<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Vue起步-切换CSS</title>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<style>
    .active {
        font: bold;
        border: 1px

    }
</style>

<body>
    <!--
       基于对象语法实现HTML css的绑定

       这里的class 是否赋值为active，取决于isActive这个值是否为true
   -->
    <div id="app-1" v-bind:class="{ active: isActive }">
        这个是内容
    </div>

    <!--
       同时支持 原始style和vue判断混用
   -->
    <div id="app-2" class="static" v-bind:class="{ active: isActive, 'text-danger': hasError }">
        这个是内容
    </div>

    <!--
        也可以直接绑定一个css对象
    -->
    <div id="app-3" v-bind:class="classObj">
        这里是内容
    </div>

    <!--
        用计算属性绑定
    -->
    <div id="app-4" v-bind:class="classObj">
        内容4
    </div>

    <!--
        基于数组语法传递多个class
    -->
    <div id="app-5" v-bind:class="[activeClass,errorClass]">
        内容5
    </div>
    <!--
        三元表达式
    -->
    <div id="app-6" v-bind:class="[isActive?activeClass:'',errorClass]">
        内容6
    </div>
    <!--
        基于对象语法,在isActive值为true的时候，赋值active对于的值
    -->
    <div id="app-7" v-bind:class="[{active:isActive},errorClass]">
        内容7
    </div>

</body>
<script>
    var app1 = new Vue({
        el: "#app-1",
        data: {
            isActive: true
        }
    })

    var app2 = new Vue({
        el: "#app-2",
        data: {
            isActive: true,
            hasError:false
        }
    })

    var app3 = new Vue({
        el:"#app-3",
        data:{
            classObj:{
                active:true, //属性的名称直接渲染成class的名称
                'text-danger':false
            }
        }
    })

    var app4 = new Vue({
        el :'#app-4',
        data:{
            isActive:true,
            error:null
        },
        computed: {
            classObj:function(){
                return {
                    active: this.isActive && !this.error,
                    'text-danger':this.error && this.error.type ==='fatal'
                }
            }
        }
    })

    var app5 = new Vue({
        el:'#app-5',
        data:{
            activeClass:'active',
            errorClass:'text-danger'
        }
    })

    var app6 = new Vue({
        el:'#app-6',
        data:{
            isActive:true,
            activeClass:'active',
            errorClass:'text-danger'
        }
    })

</script>

</html>